<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <button>发送</button>
    <div></div>
</body>
<style>
  *,body,html{
    margin: 0;
    padding: 0;
  }
  ul,li{
    list-style: none;
  }
  .color0{
    color: 24px;
    color: green;
  }
  .color1{
    color: 24px;
    color: red;
  }
  .color2{
    color: 24px;
    color: rgb(247, 0, 255);
  }
</style>
<script>
  var input = document.querySelector('input')
  var button = document.querySelector('button')
  var div = document.querySelector('div')
  var Ul= document.createElement('ul')
  var Socket = new WebSocket('ws://localhost:8888')
  Socket.addEventListener('open',function(){
    div.innerHTML  = '已成功偷窃该房间！'
  })
  button.addEventListener('click',function(){
    Socket.send(input.value)
    input.value = ''
  })
  Socket.addEventListener('message',function(e){
    var str = ''
    var Li = document.createElement('li')
    str +=`<div> <p class='color${JSON.parse(e.data).type}'>${JSON.parse(e.data).userName}--------<span class='color${JSON.parse(e.data).type}'>${JSON.parse(e.data).time}</span></p> <p class='color${JSON.parse(e.data).type}'>${JSON.parse(e.data).content}</p></div>`
    Li.innerHTML = str
    Ul.appendChild(Li)
    div.appendChild(Ul)
  })
</script>
</html>